<template>
	<view class="content yaoqingaddindex">
		<view class="input-group">			

			<view class="input-row f14 border">
				<text class="title">到访时间：</text>
				<view class="tab"  >{{ thistimes }}</view>
			</view>
			
			<view class="input-row f14 border">
				<text class="title" >到访公司：</text>
				<view  class="tab w70" v-bind:class="{ active: isActive }" @click="open('company')">{{companyInfodept?companyInfodept:'请填写到访公司'}}</view>			
				<!-- <m-input v-if="comdeptlist.length==0" type="text" class="f14" readonly="readonly" clearable v-model="choosecompany"  placeholder="请填写到访公司"></m-input>				 -->
				<view class="">
					<uni-icons type="arrowright" size="20"></uni-icons>
				</view>
			</view>
			
			<view class="input-row f14 border">
				<text class="title">到访部门：</text>
				<view class="tab w70" v-bind:class="{ active: isActive }" @tap="toggleTab('selector')">{{ resultInfodept.result}}</view>
				<!-- <m-input v-if="deptlist.length==0" type="text" class="f14" readonly="readonly" clearable v-model="address"  placeholder="请填写到访部门"></m-input>				 -->
				<view class="">
					<uni-icons type="arrowright" size="20"></uni-icons>
				</view>
			</view>
			<view class="input-row f14 border">
				<!-- <view style="padding-left: 15px;padding-top: 5px;">到访事由：</view> -->
				<text class="title">到访事由：</text>
				<view class="uni-textarea tab w70" ><textarea @click="inputstate()" auto-height v-model="yuanyou" placeholder="请填写到访缘由" /></view>
			</view>
			<!-- <view class="border f14">
				<view style="padding-left: 15px;padding-top: 5px;">请在下面填写备注：</view>
				<view class="uni-textarea" style="padding-top: 5px;"><textarea auto-height v-model="beizhu" placeholder="请填写备注" /></view>
			</view> -->
		</view>
		<view class="btn-row w70 mauto" v-if="statein"><button type="primary" class="primary f16" @tap="register">确定提交</button></view>
		<view class="btn-row w70 mauto" v-if="!statein"><button type="primary" class="primary2 f16">二维码已过期</button></view>
				<w-picker
			        :visible.sync="date3visible"
			        mode="selector"
			        value=""
			        default-type="name"
			        :default-props="defaultProps"
			        :options="deptlist"
			        @confirm="onConfirm($event,'selector')"
			        @cancel="onCancel"
			        ref="selector" 
			    ></w-picker>	
				<w-picker
				    :visible.sync="date1visible"
				    mode="selector"
				    value=""
				    default-type="name"
				    :default-props="defaultProps"
				    :options="comdeptlist"
				    @confirm="onConfirm($event,'company')"
				    @cancel="onCancel"
				    ref="company" 
				></w-picker>
				
				
				
				<view class="drawer">
					<view class="setbox" :class="{show: isshow}">
						<view class="header">
							<view class="drawer-item">
								<view style="font-weight: bold;margin: 0 auto;">选择公司</view>
								<view @click="close()">X</view>
							</view>
							<view class="drawer-list-item">
								<view >
								<!-- <view class="flex w100">
									<m-input type="text" focus clearable v-model="inputsearchVal" placeholder="请输入公司" @change="search()"></m-input>
								</view> -->
								
								<view class="w90 mauto p5 flex borderall">
									<m-input class="w100" type="text" focus clearable v-model="inputsearchVal" placeholder="请输入公司"  @change="search()"></m-input>
								</view>
								<!-- <uni-search-bar placeholder="请输入公司" v-model="inputsearchVal" @confirm="search()"></uni-search-bar> -->
								 <view class="comdeptlist p10">
								 	<view class="lsit  overflow mT5 pB5" v-for="item in comdeptlist">
								 		<text>{{item.name}}</text>
								 		<text class=" choobtn col_white borderr8 p2 pL5 pR5 f12" @click="choosecom(item)">选择</text>
								 	</view>
									<view class="p10 tCenter" v-if="comdeptlist.length==0"> 
										暂未找到对应的公司
									</view>
									
								 </view>
								</view>
							</view>
						</view>
					</view>
				</view>
			 <loading v-if="!isloading()"></loading>	
	</view>
</template>
<script>
import mInput from '@/components/m-input.vue';
import wPicker from '@/components/w-picker/w-picker.vue';
import {addappointment} from '@/common/api/appointment.js';
import {showgetlist} from '@/common/api/department.js'
import {userinfo,codescancode} from '@/common/api/user.js'; 
import {thistimestampToTime} from "@/common/common.js"
 import {conpanysearch} from '@/common/api/pool.js'
export default {
	components: {
		mInput,
		wPicker
	},
	data() {
		return {
			inputsearchVal:'',
			date1visible:false,
			date2visible:false,
			date3visible:false,
			thiscode:"",
			defaultProps:{
					label:"name",
					value:"id"
				},
				
			defaultProps2:{
					label:"name",
					value:"id"
				},
			deptlist:[],
			comdeptlist:[],
			companyid:'',
			deptid:'',
			page:1,
			pagesize:9999,
			dept_name:"",
			account: '',
			password: '',
			address: '',
			choosecompany:'',
			yuanyou: '',
			beizhu: '',
			company:'',
			isActive: true,
			clickstate:true,
			statein:true,
			showyearin:"2020",
			showyearinend:"2030",
			resultInfo: {
				result: '请选择到访日期',
			},
			resultInfotime: {
				result: '请选择到访时间'
			},
			resultInfodept: {
				result: '请选择到访部门'
			},
			companyInfodept: '请选择到访公司',
			thistimes:"",
			isshow:false,

		};
	},
	onLoad(event) {
		if(event.code){
			this.thiscode=event.code;
		}
		
		var thisdata=new Date();
		var thisyear=thisdata.getFullYear();
		this.showyearin=thisyear;//获取当时时间年
		this.showyearinend=thisyear+5;
		var thistimes=thisdata.getTime();
		this.thistimes=thistimestampToTime(thistimes);
		codescancode({icp_sn:this.thiscode}).then(res=>{//获取用户信息
		// console.log(res)
			if(res.data.code==200){
				if(res.data.data.incompanylist.length>0){
					console.log(JSON.stringify(res.data.data.incompanylist))
					this.comdeptlist=res.data.data.incompanylist;
					
					console.log(this.comdeptlist)
						
				 }
			
			}else{
				uni.showToast({
					icon: 'none',
					title: res.data.message
				});
				this.statein=false;
			}		
		})
		this.getdeptlist()
	},
	onShow() { 
		// this.getdeptlist()
		
		},
	watch: {
	   inputsearchVal(newName, oldName) {
			this.showcomlist()
	     }
	   },	
	methods: {
		choosecom(item){
			this.companyid=item.id;
			this.companyInfodept=item.name;
			this.isshow = false;
		},
		showcomlist(){
			this.comdeptlist=[];
			conpanysearch({'name':this.inputsearchVal,type:'vis'}).then(res=>{//获取用户信息
			// console.log(res)
				if(res.data.code==200){
					if(res.data.data.length>0){
						// console.log(JSON.stringify(res.data.data))
						this.comdeptlist=res.data.data;
							
					 }
				
				}else{1234567
					uni.showToast({
						icon: 'none',
						title: res.data.message
					});
					this.statein=false;
				}		
			})	
		},
		close() {
			// console.log('213')
			this.isshow = false
		 },
		open(){
			this.isshow = true
		},
		search(){
			
		},
		inputstate(){
			if(this.companyInfodept=='请选择到访公司'){
				uni.showToast({
					icon: 'none',
					title: '请优先选择公司'
				});
				return;
			}
		},
		toggleTab(str) {
			console.log(str)
			if(!this.statein){
				uni.showToast({
					icon: 'none',
					title: '二维码已过期，请重新扫码'
				});
				return;
			}
			if(this.companyInfodept=='请选择到访公司'){
				uni.showToast({
					icon: 'none',
					title: '请优先选择公司'
				});
				return;
			}
			if(str=='selector'){
				if(this.companyid){
					this.getdeptlist();
					this.$refs[str].show()
				}else{
					uni.showToast({
						icon: 'none',
						title: '请优先选择公司'
					});
				}
				
			}else{
				this.$refs[str].show()
			}
			
			console.log(this.comdeptlist)
		},
		onCancel(res,val){
		/*业务逻辑*/
		},
		onConfirm(res,val) {
			// console.log(res)
			// console.log(val);
			//如果页面需要调用多个mode类型，可以根据mode处理结果渲染到哪里;
			switch (val) {
				case 'date':
					this.resultInfo.result = res.value
					break;
				case 'time':
					this.resultInfotime.result = res.value
					break;
				case 'selector':
					this.resultInfodept.result = res.result
					this.address = res.result
					this.deptid =res.value
					break;
				case 'company':
					this.companyInfodept = res.result
					this.choosecompany = res.result
					this.companyid =res.value
					break;
					
					
			}
			// this.resultInfo = { ...val };
			// this.isActive = false;
		},
		register() {
			if(this.clickstate){
				this.clickstate=false;
				setTimeout(()=>{
					this.clickstate=true;
				},2000)
			

			if (this.address.length == 0) {
				uni.showToast({
					icon: 'none',
					title: '请填写到访部门'
				});
				return;
			}
			if (this.yuanyou.length == 0) {
				uni.showToast({
					icon: 'none',
					title: '请填写到访缘由'
				});
				return;
			}
			// if (this.beizhu.length == 0) {
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: '请填写备注'
			// 	});
			// 	return;
			// }
				addappointment({
					"visittime": this.thistimes,
					"visittime2": this.thistimes,
					"address": this.address,
					"deptid":this.deptid,
					"reson": this.yuanyou,
					"companyid":this.companyid,
					 "type":'vis',
					"remark": this.beizhu,
					"icp_sn":this.thiscode,
				}).then(res=>{
					console.log(res)
					if (res.data.code == 200) {
					// uni.showToast({
					// 	title: res.data.message,
					// 	icon: 'none',
					// 	duration: 2000
					// });
					
		// 			uni.navigateTo({
		// 				url: '/pages/yaoqing/xiangqing?sharebtn=YES&detailDate=' + encodeURIComponent(JSON.stringify(detail))
		// 			});
					uni.reLaunch({
						url:'/pages/shouquan/successful'
					});
					this.resultInfo.result = '请选择到访日期';
					this.resultInfotime.result= '请选择到访时间';
		
					this.address = '';
					this.yuanyou = '';
					this.beizhu = '';
				} else {
					uni.showToast({
						title: res.data.message,
						icon: 'none',
						duration: 2000
					});
				}
				})
			}
		},
		getdeptlist(){
			showgetlist({
				companyid:this.companyid,
				page:this.page,
				pagesize:this.pagesize,
				type:'link',
			}).then(res=>{
			
				this.deptlist = res.data.data
				
			})
			console.log(this.deptlist)
		},
		/*选择部门*/
		deptPickerChange(){
			
		},
	}
};
</script>

<style scoped>
.yaoqingaddindex .uni-input-placeholder{font-size: 14px;}
.tab {
	line-height: 39px;
}
.content {
	display: flex;
	flex: 1;
	flex-direction: column;
	background-color: #efeff4;
}
.active {
	color: #747272;
}
.uni-textarea uni-textarea {
	padding-left: 3.7%;
	width: 94%;
}
.primary{
	background: #007aff;                                                                                                                                                      
}
.primary2{
	background: #747272;
}

.navName{
		width: 95%;
		margin: 10px auto;
		background: #FFFFFF;
	}
	.choiceNav{
		width: 95%;
		margin: 0 auto;
		height: 40px;
		display: flex;
		font-size: 14px;
		line-height: 40px;
		justify-content: space-between;
	}
	.drawer {
	  width:100%;
	  display:flex;
	  display:-webkit-flex;
	  flex-direction:column; 
	}
	.setbox{
	    position:fixed;
	    z-index:1000;
	    left:0px;
	    right:0px;
	    width:100%;
	    height:100%;
	    background:rgba(51,51,51,0.4);
	    border-left: 1px solid #CFD8DC!important;
	    box-shadow:0px 3px 12px rgba(0,0,0,0.12);
	    -webkit-transition: all 0.3s ease;
	    transition: all 0.3s ease;
	    bottom:-100%;
	}
	.show {
	 bottom: 0;
	}
	.header{
		width: 100%;
		background: #FFFFFF;
		line-height: 40px;
		position: absolute;
		height: 20rem;
		bottom: 0;
		 border-top-left-radius: 5px;
		 border-top-right-radius: 5px;
		 border-bottom: 10px solid #FFFFFF;
	}
	
	.drawer-list-item{
		width: 100%;
		height: 40px;
		border-bottom: 1px solid #EEEEEE;
	}
	
	.drawer-item{
		width: 95%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		font-size: 14px;
		color: #333333;
	}
	.uni-searchbar{width: 100%;}
	.comdeptlist{height: 14rem;overflow: auto;}
	.comdeptlist .lsit{border-bottom: 1px solid #C0C0C0;}
	.choobtn{background-color: #2a82e4;    float:right ;}
</style>
